<script lang="ts" setup>
import { OptionsArrayType, OptionsType } from '@/types/interface'
import CustomCell from './CustomCell.vue'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps<{
  data: OptionsType | OptionsArrayType
}>()

const getDataType = computed(() => {
  return Array.isArray(props.data)
})
const getArrayLength = computed(() => {
  return getDataType.value ? (props.data as OptionsArrayType).length : 0
})
const emits = defineEmits(['change'])
const router = useRouter()
const handleClick = (item: OptionsType) => {
  if (item.label === '经纬度') {
    router.push({
      name: 'location',
      query: {
        longtitude: (item.value as string).split(',')[0],
        latitude: (item.value as string).split(',')[1],
      },
    })
  }
  // emits('click', item)
}
const handleChange = async (data: OptionsType) => {
  emits('change', data)
}
</script>

<template>
  <div class="custom-cell-group">
    <custom-cell v-if="!getDataType" class="custom-cell single">
      <template #title>
        <div class="custom-cell-group__title">
          <span class="custom-cell--span">
            {{ (data as OptionsType).label }}
          </span>
        </div>
      </template>
      <template #content>
        <div class="custom-cell-group__content">
          <span
            v-if="(data as OptionsType).type === 'span'"
            class="custom-cell--span"
            @click="handleClick(data as OptionsType)"
          >
            {{ (data as OptionsType).value }}
          </span>
          <van-switch
            v-else-if="(data as OptionsType).type === 'switch'"
            v-model="(data as OptionsType).value"
            read-only
          />
          <van-tag v-else type="warning" size="large" color="#8DD3B5">
            {{ (data as OptionsType).value }}
          </van-tag>
        </div>
      </template>
    </custom-cell>
    <custom-cell v-else :key="index" v-for="(item, index) in data">
      <template #title>
        <div
          class="custom-cell-group__title"
          :class="{
            'column-4-title': getArrayLength === 4,
            'column-3-title': getArrayLength === 3,
          }"
        >
          <span class="custom-cell--span">
            {{ (item as OptionsType).label }}
          </span>
        </div>
      </template>
      <template #content>
        <div class="custom-cell-group__content">
          <span
            v-if="(item as OptionsType).type === 'span'"
            class="custom-cell--span"
            @click="handleClick(item as OptionsType)"
          >
            {{ (item as OptionsType).value }}
          </span>
          <van-switch
            v-else-if="(item as OptionsType).type === 'switch'"
            v-model="(item as OptionsType).value"
            active-color="#8DD3B5"
            active-value="1"
            inactive-value="0"
            @change="handleChange(item as OptionsType)"
            read-only
          />
          <van-tag
            v-else-if="(item as OptionsType).type === 'tag'"
            :plain="(item as OptionsType).isPlain"
            type="warning"
            size="large"
            :color="
              (item as OptionsType).color
                ? (item as OptionsType).color
                : '#8DD3B5'
            "
          >
            {{ (item as OptionsType).value }}
          </van-tag>
          <div flex items-center v-else>
            <img :src="(item as OptionsType).icon" alt="" w-20 h-20 />
            <span
              :style="{ color: (item as OptionsType).color }"
              class="text-[20px]"
            >
              {{ (item as OptionsType).value }}V
            </span>
          </div>
        </div>
      </template>
    </custom-cell>
  </div>
</template>

<style scoped>
.single {
  display: flex;
  align-items: center;
  .custom-cell-group__content {
    flex: 1;
  }
}
.custom-cell-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(v-bind(getArrayLength), 1fr);
  grid-template-rows: 1fr;
  > .custom-cell-group__title {
    border-left: none;
  }
}
.custom-cell--span {
  font-size: 24px;
  color: var(--xy-grey-text-color);
  line-height: 64px;
}
.custom-cell-group__content {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  border: 1px solid #ebeef5;
  height: 100%;
}
.custom-cell-group__title {
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
  width: 178px;
}
.custom-cell {
  display: flex;
  align-items: center;
}
.custom-cell-group__title + .custom-cell-group__content {
  border-left: none;
  border-right: none;
}
.custom-cell + .custom-cell {
  .custom-cell-group__content {
    border-right: none;
  }
  .custom-cell-group__title {
    border-left: none;
  }
}
.custom-cell-group + .custom-cell-group {
  .custom-cell-group__content {
    border-top: none;
  }
  .custom-cell-group__title {
    border-top: none;
  }
}
.custom-cell-group {
  > .custom-cell {
    .custom-cell-group__title {
      border-left: none;
    }
  }
}
.column-4-title {
  width: 46px;
  > .custom-cell--span {
    font-size: 20px;
  }
}
.column-3-title {
  width: 124px;
  > .custom-cell--span {
    font-size: 20px;
  }
}
</style>
